<template>
  <div class="bg-gray">
    <an-nav-bar
      title="文件类型展示"
      @onClickLeft="onClickLeft"
      leftText="返回"
    ></an-nav-bar>

    <div class="box-scroll">
      <!-- 动态生成分类区块 -->
      <div
        v-for="(category, index) in categories"
        :key="index"
      >
        <div class="tip">{{ category.label }}</div>
        <an-grid
          :list="category.list"
          :iconSize="36"
          :font-size="24"
        ></an-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { fileType } from '@/api/fileTyep';

// 文件类型分类配置
const CATEGORY_CONFIG = [
    {
        label: '图像类格式',
        types: ['png', 'jpg', 'jpeg'],
        listName: 'imgList'
    },
    {
        label: '文档类格式',
        types: ['pdf', 'docx', 'xlsx'],
        listName: 'fileList'
    },
    {
        label: '压缩包格式',
        types: ['zip'],
        listName: 'zipList'
    },
    {
        label: '其他格式',
        types: [], // 匹配所有其他类型
        listName: 'otherList'
    }
];

export default {
    name: 'FileType',
    data() {
        return {
            iconMap: {
                png: require('@/assets/img/file/png.png'),
                jpg: require('@/assets/img/file/jpg.png'),
                jpeg: require('@/assets/img/file/jpeg.png'),
                pdf: require('@/assets/img/file/pdf.png'),
                docx: require('@/assets/img/file/docx.png'),
                xlsx: require('@/assets/img/file/xlsx.png'),
                zip: require('@/assets/img/file/zip.png'),
                default: require('@/assets/img/file/default.png')
            },
            // 初始化分类列表
            categories: CATEGORY_CONFIG.map((config) => ({
                ...config,
                list: []
            }))
        };
    },
    created() {
        this.getFileType();
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },

        getFileExtension(filename) {
            return filename?.split('.').pop().toLowerCase() || 'default';
        },

        async getFileType() {
            try {
                const { result } = await fileType();

                // 创建分类映射表
                const categoryMap = new Map(this.categories.map((category) => [category.listName, []]));

                // 单次遍历处理数据
                result.forEach((item) => {
                    const ext = this.getFileExtension(item.file_type);
                    const matchedCategory = this.categories.find(
                        (category) =>
                            category.types.includes(ext) ||
                            (category.label === '其他格式' && !this.categories.some((c) => c.types.includes(ext)))
                    );

                    if (matchedCategory) {
                        categoryMap.get(matchedCategory.listName).push({
                            ...item,
                            type: ext,
                            text: item.name,
                            imgurl: this.iconMap[ext] || this.iconMap.default
                        });
                    }
                });

                // 更新分类数据
                this.categories = this.categories.map((category) => ({
                    ...category,
                    list: categoryMap.get(category.listName)
                }));
            } catch (error) {
                console.error('获取文件类型失败:', error);
                // 这里可以添加错误提示逻辑
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.tip {
    font-size: 28px;
    color: #333;
    margin: 16px 0 12px 12px;
    position: relative;
    padding-left: 24px;

    &::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #1890ff;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}
</style>

